<template>
    <div class="tabbar">
        <van-tabbar route v-model="active" inactive-color="#bfbfbf" active-color="#fecb1c">
            <van-tabbar-item replace to="/home">
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ? icon[0].active : icon[0].inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/board">
                <span>宠物寄养</span>
                <template #icon="props">
                    <img :src="props.active ? icon[1].active : icon[1].inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/order">
                <span>订单</span>
                <template #icon="props">
                    <img :src="props.active ? icon[2].active : icon[2].inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/mine">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? icon[3].active : icon[3].inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 选中的索引号
            active: 0,
            icon: [{
                active: require('@/assets/img/sy1.png'),
                inactive: require('@/assets/img/sy.png')
            },
            {
                active: require('@/assets/img/jy1.png'),
                inactive: require('@/assets/img/jy.png')
            },
            {
                active: require('@/assets/img/dd1.png'),
                inactive: require('@/assets/img/dd.png')
            },
            {
                active: require('@/assets/img/wd1.png'),
                inactive: require('@/assets/img/wd.png')
            }
            ],
        };
    },
}
</script>

<style></style>